import React, { Fragment, useState } from 'react';
import { Button, Form, Icon, Row, Col } from 'antd';
import { formatMessage } from 'umi';
import PropTypes from 'prop-types';
import authHelpr from '@/utils/auth/helper';
import './index.less';

const { checkCode } = authHelpr;
/**
 * 高级搜索组件
 */
const AdvancedSearch = React.forwardRef((props, ref) => {
    const {
        reset,
        submit,
        collapsedFrom,
        baseForm,
        queryCode = true,
        isCollapsed,
        btns,
        formStyle,
        extraForm,
        lodaing
    } = props;
    const [collapsed, setCollapsed] = useState(isCollapsed);

    React.useEffect(() => {
        setCollapsed(isCollapsed);
    }, [isCollapsed]);

    return (
        <div ref={ref}>
            {baseForm && (
                <Form layout="inline" style={{ marginBottom: 12, ...formStyle }}>
                    <Row type="flex" justify="space-between" align="middle">
                        <Col>
                            {baseForm}{' '}
                            <Form.Item>
                                {checkCode(queryCode) && (
                                    <Button
                                        onClick={() => submit && submit(1, collapsed)}
                                        type="primary"
                                        loading={lodaing}
                                    >
                                        {formatMessage({
                                            id: 'form.search'
                                        })}
                                    </Button>
                                )}
                                <Button style={{ marginLeft: 8 }} onClick={reset}>
                                    {formatMessage({ id: 'form.reset' })}
                                </Button>
                            </Form.Item>
                            {collapsedFrom && (
                                <Form.Item>
                                    <Fragment>
                                        <a
                                            href="#"
                                            onClick={e => {
                                                e.preventDefault();
                                                setCollapsed(!collapsed);
                                            }}
                                        >
                                            {collapsed ? '展开' : '收起'}
                                            <Icon type={collapsed ? 'caret-down' : 'caret-up'} />
                                        </a>
                                    </Fragment>
                                </Form.Item>
                            )}
                        </Col>
                        <Col className="btns">
                            {btns &&
                                btns.map(
                                    (btn, index) =>
                                        btn &&
                                        React.cloneElement(btn, {
                                            // eslint-disable-next-line react/no-array-index-key
                                            key: index
                                        })
                                )}
                        </Col>
                    </Row>
                    {collapsedFrom && <div style={{ display: collapsed ? 'none' : 'block' }}>{collapsedFrom}</div>}
                    {extraForm && <div style={{ marginTop: '20px' }}>{extraForm}</div>}
                </Form>
            )}
        </div>
    );
});
AdvancedSearch.propTypes = {
    // 重置操作
    reset: PropTypes.func,
    // 提交操作
    submit: PropTypes.func,
    baseForm: PropTypes.element,
    collapsedFrom: PropTypes.element,
    extraForm: PropTypes.element,
    // 默认是否展开(非必填)
    isCollapsed: PropTypes.bool,
    // 查询按钮权限（非必填）
    queryCode: PropTypes.any,
    // 导出按钮等其他跟table有关的操作按钮(非必填)
    btns: PropTypes.array,
    // 按钮loding 状态 (非必填)
    lodaing: PropTypes.bool,
    formStyle: PropTypes.object
};
AdvancedSearch.defaultProps = {
    reset: () => {},
    submit: () => {},
    collapsedFrom: null,
    extraForm: null,
    baseForm: null,
    queryCode: true,
    isCollapsed: true,
    btns: [],
    lodaing: false,
    formStyle: {}
};
export default AdvancedSearch;
